import React, { VFC, useEffect, useState } from "react"
import { TablePaginationConfig,Input, Button, Select, Table } from 'antd';
import { getTeamProjectTopList} from '@services/index';
import {useRecoilValue} from 'recoil'
import { fetchProjectIssueAllList } from '@selectors/selectProduct';

import PageContent from '@layout/PageContent';
import { FILe_URL } from "@tools/config";
const { Option } = Select;

const Group:VFC = () => {
    const [dataList, setDataList] = useState<any[]>([]);
    const [loading, setLoading] = useState<boolean>(false)
    let [issueId, setIssueId] = useState<string|undefined>(undefined);
    let [groupName, setGroupName] = useState<string|undefined>(undefined);

    useEffect(()=>{
        initData();
    },[]); 
    // 获取列表 数据
    const initData= async () =>{
        setLoading(true)
        try{
            const { data, status } = await getTeamProjectTopList({
                projectId: JSON.parse(sessionStorage.userInfo).projectId,
                name: groupName,
                issueId: issueId,
            })
            if(status === '0'){
                setDataList(data);
            }
        }finally{
            setLoading(false)
        }
    }
    const renderSearch = () => (
        <div className="box-search dflex br2">
            <div className="search-items dflex">
                <div className="_items dflex">
                    <label>所属期数</label>
                    <Select value={issueId} style={{ width: 120 }} onChange={e => setIssueId(e)}>
                        {
                            useRecoilValue(fetchProjectIssueAllList).map( (item, key) => {
                                return <Option value={item.id} key={key}>{item.name}</Option>
                            })
                        }
                    </Select>
                </div>
            </div>
            <div className="btns">
                <Button type="primary" onClick={initData}>查询</Button>
            </div>
        </div>
    )
    // 表格列名称
    const columns:any = [
        {title: '序号', dataIndex: 'index', render:(_t:string, _r:any, index:number)=>`${index+1}`},
        { title: '队标', dataIndex: 'headPic', render: (text:string)=> (text?<img style={{maxWidth: 50, maxHeight: 50}} src={`${FILe_URL}${text}`}/>:'-') },
        {title: '队名', dataIndex: 'teamName'},
        { title: '学期', dataIndex: 'issueName' },
        {title: '金额', dataIndex: 'balance', render:(t:number)=>`${t/10000+'万'}`}
    ]
    return (
        <>
        {renderSearch()}
            <PageContent title="排行榜">
                <Table 
                    rowKey={({id})=> id}
                    bordered
                    columns={columns} 
                    dataSource={dataList}
                    pagination={false}
                    loading={loading}
                    scroll={{ x: 0 }}
                />
            </PageContent>
        </>
    )
}
export default Group
